<template>
  <div class="main">
    <div class="writesth clearfix">
      <router-link class="iconfont pull_right" to="/addnote">&#xe602;</router-link>
    </div>
    <mt-loadmore :top-method="loadTop" ref="loadmore" @top-status-change="handleTopChange" class="artcontainer" :topDistance="distance"> 
    <!-- <article v-for="item in articleList">
      <router-link  :to="'/details/'+item.id" :key="item.id">
        <div class="top">
          <a href="#" class="user" :id="item.id" >
            <span class="auther"><img :src="item.ico" class="userimg"></span>
            <span class="username">{{item.author}}</span>
          </a>
          <a href="#" class="close" >&times;</a>
        </div>
        <div class="msg_content">
          <p class="msg_text">{{item.text}}</p>
          <div class="imgs">
            <img :src="item.img" class="msg_img">
          </div>
        </div>
        <div class="interact">
          <a href="#" class="share iconfont">&#xe6f3;</a>
          <a href="#" class="commont iconfont">&#xe667;<span class="badge">{{item.commentNum}}</span></a>
          <a href="#" class="down iconfont">&#xe814; <span>{{item.against}}</span></a>
          <a href="#" class="zan iconfont">&#xe644; <span>{{item.support}}</span></a>
        </div>
      </router-link>
    </article> -->
     
    <a  :key="item.id" v-for="item in articleList" @click="routerTo(item)">
      <commonArticle  :dataFormHome="item"></commonArticle>
    </a>
  
    <div slot="top" class="mint-loadmore-top myloadmore">
      <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">下拉加载</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
    </div>
    </mt-loadmore>
      <!-- <loading v-show="!articleList.length"></loading> -->
  </div>
</template>
<script>
import jsonp from 'jsonp'
import axios from "axios";
import {Toast,Loadmore} from "mint-ui";
import store from "@/vuex/store";
import {mapMutations} from "vuex";
import commonArticle from "@/components/common/commonArticle";
// import loading from "@/components/common/loading";
import {sessionStore} from "@/base/js/localStore"
export default {
  name: 'Home',
  data() {  
    return {
      articleList:[],
      id:4,
      topStatus:"",
      distance:80
    }
  },
  components:{
    commonArticle
  },
  store,
  methods:{
    // ...mapMutations:[],
    routerTo(item){
      this.$store.commit('hometoDetailsStore', item);
      sessionStore.setLocal('detail',JSON.stringify(this.$store.state.hometoDetails))
      this.$router.push({name:"homedetails",params:item})
    },
     handleTopChange(status) {
        this.topStatus = status;
      },
      loadTop() {
    // 加载更多数据
    this.$refs.loadmore.onTopLoaded();
    /*setTimeout(()=>{
      this.articleList.unshift({
    "against": "1201",
    "author": "xx"+this.id,
    "commentNum": "56112",
    "ico": "http:\/\/oh2qid53p.bkt.clouddn.com\/text-img00003.jpg",
    "id": this.id++,
    "img": "http:\/\/oh2qid53p.bkt.clouddn.com\/text-img00001.jpg",
    "support": "836621",
    "text": "是谁，在一纸浅墨文字里安静等待？是谁，在一路时光里仆仆风尘？又是谁，在一叶轻舟里只影远行？ 　　那个人，是清浅岁月里最沉重的那一滴雨，在记忆的天空，季季滴落，季季来去。我流连在三月的雨季，看见永恒的天空已然由暗灰变作了烟青，看见蛮荒的塬上渐渐滋生出生命嫩绿的芽子，写意成一帘梵净山里早春的风景。一树茶花，朦胧烟雨，借着三月乍暖还寒的春光，我分明看见，晶莹的泪珠两行，悄然跌落，是滑落过岁月绸帕上的清冽水迹。 很多时候，我想，你一如深山里的山茶，你一如幽潭里的素莲，在未至的花期里，幽隐着，而我，便在与你相约的时光里，对生活心怀敬意，--期待，在那一个花期来临的日子，一睹你花开的样子。如此，我退居于山野小村，营生着一颗素朴的心，在不计时长的小村时光里，热爱着平凡的事情，热爱陌生人家的爽朗笑声，热爱市井人生的无聊嬉戏，也热爱小猫小狗在日头下的慵懒困意，偶尔也吃茶养花，偶尔也读书听雨，沉湎于日月星辰、花草田间、露水晨昏，在低温的日子，不急不缓，深情地活着！与你，相约，是一种清浅的禅意，因为，想你，是一种忧伤的美丽！初春的雨，总是会落进心里的某个地方，或者落进某一个不经意间涌动的念里，天青的颜色，乍暖还寒时候，最难将息。就如看见细雨飘零，总会令人无端想起旧年的黄梅子黄梅雨，还有一个遥远北方的你。来于大千，行于世间，或许，每一个人都会有极致的孤独，每一个人都会有深眷的时刻，都有一个可以唯一与之相约的人，那个人，或许在天边，或许在近前，而那一款独一的深情，却是极致到不悔，就算，真正能陪着自己走完人生的，只有时间最钟情。世界大无穷，可融芸芸众生，你与我，恰恰都是众生里的两个，就如两枚山茶花，原本该是各自幽香，不近风尘，不染亲疏，但这世界偏是又小如犄墙，在墙影的转角处，那个彷如山茶花开的你，非得让我遇见，从此，有了牵连，与你有关，让我活着的深情，细腻而丰盈。你是一个怎样的女子呀？在即将来临的花期，会像一朵艳丽的山茶，繁丽的盛开在我写给你的那一纸文字幽角，在三月的时光里，繁荣我的那些没有藩篱遮拦的往事茶园，在第一朵茶花绽开的时候，与你温上一壶梵净山新出的绿茶，游历在武陵正源海拔高度1000米处的茶树茶花茶叶的每一寸清幽世界，惬意时弹笑，寄情江湖，悲凉时潸泪，快意人生，一如季节更替，枯荣自觉。 我想念你，在春茶采收的季节，是如此深情的；我想念你，在那一朵茶花飘香的日子，是如此忧伤的；我想念你，在梵净山悠悠的梵唱里，是如此清浅的。与你相约一种清浅的禅意，而我，便在红尘最深处的禅意里，等你！时间如来，不期而至，世界如是，相见恨晚，若能守得一隅清明，只许你与我共度，做梵净山里的飞鸟相与还，朝花夕拾，煮茶焚香，杖藜执酒，白马轻舟，君可愿？",
    "title": "与你相约，是一种禅意"
  })
    },2000)
    */
  }
  },
  mounted:function(){
    /*fetch("http://huidoo.com.cn/utopia/SysSelectAll.action").then(function(res){
      debugger;
      console.log(res);
      if(res[0].CODE=8888){
        this.articleList=res[0].data;
      }
    })*/
    this.articleList= []
  // jsonp("https://api.douban.com/v2/movie/subject/1764796", null, (err, data) => {
  //   console.log(data)

  // })
    var that=this;
    axios.get("http://huidoo.com.cn/utopia/SysSelectAll.action").then(function(res){
      if(res.data[0].CODE==8888){

        setTimeout(()=>{
          that.articleList=res.data[0].data;
        },1500)
      }
    }).catch(function(error){
      Toast({
        message:"网络错误，请刷新"
      })
    })
    
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 622814 */
  src: url('//at.alicdn.com/t/font_622814_140hd2vgznbnvcxr.eot');
  src: url('//at.alicdn.com/t/font_622814_140hd2vgznbnvcxr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_622814_140hd2vgznbnvcxr.woff') format('woff'),
  url('//at.alicdn.com/t/font_622814_140hd2vgznbnvcxr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_622814_140hd2vgznbnvcxr.svg#iconfont') format('svg');
}
.main{
  .writesth{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: #FFF;
    z-index: 100;
    a{
      margin:8px;
    }
  }
  .myloadmore{
    background-color:#ededed;
    padding:20px 0 10px;
    margin-top:-80px;
  }
  .artcontainer{
    margin-top:30px;
  }
  article{
    overflow:hidden;
    margin-bottom:14px;
    .top{
      overflow:hidden;
      .user{
        display:block;
        float:left;
        span.auther{
          width:40px;
          height:40px;
          display:inline-block;
          border-radius:50%;
          border:1px solid #dedede;
          overflow:hidden; 
          vertical-align:middle;
          margin-right:5px;
          img{
            width:100%;
            height:100%;
          }
        }
      }
      a.close{
        float:right;
      }
    }
    .msg_content{
      margin:5px 0;
      .imgs{
        margin:0 auto;
        border:1px solid #dedede;
        margin:8px 0;
      }
      .msg_img{
        width:100%;
        height:100%;
      }
      .msg_text{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height:18px;
        font-size:14px;
      }    
    }
    .interact{
      a{
        font-size:16px;
        margin:0 8px;
      }
      a.share,a.commont{
        float:left;
      }
      a.zan,a.down{
        float:right;
      }
    }
  }
}
</style>
